<template>
    <view class="top-bar" :style="{'background-color': props.bgColor}">
        <view class="bar-view" :style="{'margin-top': safeInfo.top+'px'}">
            <view class="left-icon" v-if="props.isBack" @click="handleBack">
                <u-icon name="arrow-leftward" color="#333333" size="20"></u-icon>
            </view>
            <view class="con-text">
                <text>{{title}}</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { userAppInfo } from '@/store/modules/user';
import { storeToRefs } from 'pinia';
const store = userAppInfo();
const { safeInfo } = storeToRefs(store);

interface PropsType {
    title: string,
    isBack: boolean,
    bgColor: string,
}
const props = withDefaults(defineProps<PropsType>(), {
    title: "",
    isBack: true,
    bgColor: '#FFFFFF'
})

// 返回
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>

<style lang="scss" scoped>
.top-bar{
    width: 100%;
    .bar-view{
        display: flex;
        height: 44px;
        align-items: center;
        position: relative;
        background-color: transparent;
        .left-icon{
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 20rpx;
            height: 44px;
            display: flex;
            align-items: center;
        }
        .con-text{
            flex: 1;
            display: flex;
            justify-content: center;
        }
    }
}
</style>